<template>
    <div class="userEdit">
      <Modal v-model="isView" :mask-closable="false" title="编辑用户" :footer-hide="true">
        <Form :model="item" label-position="right" :label-width="100" :rules="rules" ref="form">
          <FormItem label="账号" prop="loginName">
            <Input v-model="item.loginName" />
          </FormItem>
          <FormItem label="用户名">
            <Input v-model="item.userName" />
          </FormItem>
          <FormItem label="真实姓名">
            <Input v-model="item.realName" />
          </FormItem>
          <FormItem label="姓名首字母">
            <Input v-model="item.firstNameCharacter" />
          </FormItem>
          <FormItem label="性别">
            <RadioGroup v-model="item.sex">
              <Radio label="1">男</Radio>
              <Radio label="0">女</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="是否离职">
            <i-switch v-model="item.isOnJob"></i-switch>
          </FormItem>
          <FormItem label="密码:" v-if="!item.salt">
            <!--<Input type="password" v-model="user.password" />-->
            初始密码为123456，请用户自行登录修改!
          </FormItem>
          <FormItem label="角色:">
            <RadioGroup v-model="item.roleId" vertical>
              <Radio :label="role.id" v-for="(role) in roleLists" :key="role.id">{{role.name}}</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
        <div class="operationView">
          <Button type="primary" class="operation_btn" @click="handleCancle">取消</Button>
          <Button type="primary" class="operation_btn" @click="handleSave">保存</Button>
        </div>
      </Modal>
    </div>
</template>

<script>
  export default {
    name: 'userEdit',
    data() {
      return {
        isView: false,
        roleLists: [],
        item: {
          id: 0,
          isDelete: 0,
          loginName: '',
          password: '123456',
          userName: '',
          firstNameCharacter: '',
          realName: '',
          online: '0',
          sex: '1',
          roleId: '',
          isOnJob: false
        },
        rules: {
          loginName: [
            {required: true, message: '请输入账号', trigger: 'blur' }
          ]
        },
      }
    },
    methods: {
      getRoleList() {
        this.ajax({
          type: this.api.roleList.type,
          url: this.api.roleList.url,
          data: {},
          success: (data) => {
            this.roleLists = data.object
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      openView(row) {
        this.isView = true
        this.$refs['form'].resetFields();
        this.getRoleList()
        if (row) {
          this.item = Object.assign({},row)
          this.item.isOnJob = this.item.isOnJob == 1 ? true : false
        } else {
          this.item = {
            id: 0,
            isDelete: 0,
            loginName: '',
            password: '',
            userName: '',
            firstNameCharacter: '',
            realName: '',
            online: '0',
            sex: '1',
            roleId: '',
            isOnJob: false
          }
        }
      },
      handleCancle(){
        this.isView = false
        this.$refs['form'].resetFields();
      },
      handleSave(){
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({},this.item)
            obj.isOnJob = obj.isOnJob ? 0 : 1
            this.ajax({
              type: this.api.userEdit.type,
              url: this.api.userEdit.url,
              data: obj,
              isSubmit: true,
              success: (data) => {
                this.$Message.success('保存成功！');
                this.handleCancle()
                this.$emit('getList')
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
    .userEdit {
    }
</style>
